<template>
  <div>
    <div class="add_btn">
      <el-button size="small" type="success" icon="el-icon-edit" @click="showDiag('add')">新增</el-button>
    </div>
    <el-table ref="filterTable" :data="tableData" style="width: 100%">
      <el-table-column
        prop="role"
        label="角色"
        sortable
        width="auto"
        column-key="role"
        :filters="filterData"
        :filter-method="filterHandler"
      ></el-table-column>
      <el-table-column prop="ModifiedBy" label="修改人" width="auto"></el-table-column>
      <el-table-column prop="ModifiedDate" label="修改日期"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click.native.prevent="handleDelete(scope.$index, tableData)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <role-dialog :DialogData="DialogData" @closeDialog="hiddeDiag"></role-dialog>
  </div>
</template>

<script>
import us from "../../api/user";
import RoleDialog from "./components/RoleDialog";
export default {
  name: "role",
  components: { RoleDialog },
  created() {
    us.getRoles()
      .then(res => {
        const { code, roles } = res.data;
        if (code) {
          this.tableData = roles;
          let obj = {};
          this.filterData = roles.reduce((acc, next) => {
            obj[next.role]
              ? ""
              : (obj[next.role] =
                  true && acc.push({ text: next.role, value: next.role }));
            return acc;
          }, []);
        }
      })
      .catch(error => {
        this.$notify.error({
          title: "错误",
          message:
            error.message || error.response.data.message || "get data fail"
        });
      });
  },
  data() {
    return {
      tableData: [],
      filterData: [],
      DialogData: {
        showDialog: false,
        title: "",
        data:{}
      }
    };
  },
  methods: {
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    handleEdit(index, row) {
      this.DialogData.data=row;
      this.showDiag("edit")
    },
    handleDelete(index, rows) {
      //异步请求后台删除
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          rows.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    showDiag(type) {
      if (type === "add") {
        this.DialogData.title = "新增";
      } else if (type === "edit") {
        this.DialogData.title = "修改";
      }
      this.DialogData.showDialog = true;
    },
    hiddeDiag(b) {
      this.DialogData.showDialog = b;
    }
  }
};
</script>
<style lang="scss">
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.add_btn {
  margin-top: 10px;
  text-align: right;
  margin-right: 20px;
}
</style>